<template>
    <div class="lang">
        <assets-head :title="$t('主题设置')" />
        <div v-for="(item, index) in themeList" :key="index"
            class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35 "
            @click="changeModel(item.type)">
            <div class="lang-title flex items-center font-26 textColor">
                {{ $t(item.title) }}
            </div>

            <img class="w-40 h-40 lh-40" v-if="item.type == theme" src="../../assets/image/public/checked.png" />
        </div>
    </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import assetsHead from "@/components/assets-head";
import { setStorage, getStorage } from '@/utils/utis'
export default {
    data() {
        return {
            type: 'white',
            themeList: [
                {
                    title: '白天模式',
                    type: 'light',
                },
                {
                    title: '黑夜模式',
                    type: 'dark',
                },
            ]
        }
    },
    components: {
        assetsHead,
    },
    computed: {
        ...mapGetters('home', ['theme'])
    },
    methods: {
        ...mapMutations('home', ['SET_THEME']),
        changeModel(type) {
            this.type = type;
            this.SET_THEME(type)
        }
    }
}
</script>
<style lang="scss" scoped>
.lang {
    width: 100%;
    box-sizing: border-box;
}

.CommonProblem-padding {
    padding-left: 50px;
    padding-right: 50px;
}

.lang-padding {
    padding: 43px 35px 43px 35px;
    box-sizing: border-box;

    @include themify() {
        border-bottom: 1px solid themed("line_color");
    }

    font-weight: 400;
    font-size: 35px;
    color: #000000;
    display: flex;
}

.lang-flex {
    flex: 1;
}
</style>
